<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/video.css" />
	</head>
	<style>
		*{
	font-family:PingFang-SC-Bold;
}
      .mui-bar{ box-shadow: none; background: white; height:50px;}
		.mui-bar .mui-icon{ margin-top:4px; font-size:28px; color: #999999; }
		.mui-bar-nav.mui-bar .mui-icon{padding-left:5px;}
		.mui-bar .mui-title{margin-top:6px;color: #2f2f2f; font-weight: normal;}
		.more{ margin-top: 16px; margin-right: 5px;}
		.mui-bar:after
 {
position: absolute;
right: 0;
 bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color:#dadada; 	
    		 }
body{ background: white; }
.mui-content{ padding-bottom:40px; display: inline-block; margin-top: 10px;background: white; }
.user_txt{padding-left: 1rem; height: 25px; margin: 0px; margin-bottom: 20px;}
.news_title{
	font-size: 1.4rem;
    line-height: 1.5;
    font-weight:500;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: .9rem;
    margin-bottom: .3rem;
    }
.user_img{ width: 25px; height: 25px; border-radius: 25px; margin-right: 5px;}
.user_name,.news_time{ position: relative; top: -8px; font-size: 12px;}
.news_time{  margin-left: 10px;}
.text_dome{ padding: 10px;}
.text_dome b{ color: #000000; font-size: 16px;}

#openvideo{ height: 50px; line-height: 50px; color:white; text-align: center; position: fixed; z-index:110; bottom: 0px; width: 100%; background-color:#000000;}
.mui-video-Container {
	background-color: #FFFFFF;
	overflow: hidden;
	margin: 10px;
	padding: 0px;
}

.mui-video-Container .mui-video-full {
	position: relative;
	overflow: hidden;
}

.mui-video-Container video {
	width: 100%;
	background-color: #000000;
}

.mui-video-Container video[ishivideo="true"]::-webkit-media-controls {
	display: none !important;
}

.mui-video-Container video[ishivideo="true"]::-moz-media-controls {
	display: none !important;
}

.mui-video-Container video[ishivideo="true"]::media-controls {
	display: none !important;
}

.mui-video-Container .icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
	font-size: 20px;
	position: relative;
	top: 1px;
}

.mui-video-Container .rprogress {
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	margin: auto;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	display: none;
}

.mui-video-Container .rprogress .ladtit {
	color: white;
	font-size: 14px;
}

.mui-video-Container .rschedule {
	background-color: rgba(0, 0, 0, 0);
	border: 3px solid rgba(0, 183, 229, 0.9);
	opacity: .9;
	border-left: 5px solid rgba(0, 0, 0, 0);
	border-right: 5px solid rgba(0, 0, 0, 0);
	border-radius: 50px;
	box-shadow: 0 0 15px #2187e7;
	width: 46px;
	height: 46px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -23px;
	margin-top: -23px;
	-webkit-animation: spin 1s infinite linear;
	animation: spin 1s infinite linear;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/*横条样式*/
.mui-video-Container input[type=range] {
	-webkit-appearance: none;
	/*清除系统默认样式*/
	width: 100%;
	background: -webkit-linear-gradient(#40CEA8, #40CEA8) no-repeat, #fff;
	/*设置左边颜色为#61bd12，右边颜色为#ddd*/
	background-size: 0% 100%;
	/*设置左右宽度比例*/
	height: 3px;
	/*横条的高度*/
}

/*拖动块的样式*/
.mui-video-Container input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	/*清除系统默认样式*/
	height: 13px;
	/*拖动块高度*/
	width: 13px;
	/*拖动块宽度*/
	background: #fff;
	/*拖动块背景*/
	border-radius: 50%;
	/*外观设置为圆形*/
	/* border: solid 1px #ddd;*/
	/*设置边框*/
}

.mui-video-Container .mui-pay_ico {
	z-index: 2;
	width: 80px;
	text-align: center;
	height: 80px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.mui-video-Container .mui-pay_ico .icon {
	font-size: 52px;
	color: white;
}

.mui-video-Container .mui-time-current {
	width: 46px;
	float: left;
	text-align: right;
	display: inline-block;
	color: white;
	font-size: 14px;
}

.mui-video-Container .mui-time-total {
	width: 78px;
	text-align: center;
	color: white;
	display: inline-block;
	font-size: 14px;
}

.mui-video-Container .mui-time-total .icon {
	font-size: 28px;
	color: white;
}

.mui-video-Container .mui-time-cout {
	float: left;
	margin-top: -5px;
}

.mui-video-Container .mui-quanping {
	margin-top: 6px;
	margin-left: 3px;
	position: absolute;
	right: 0px;
	z-index: 10;
}

.mui-video-Container .mui-videoControls {
	height: 40px;
	width: 100%;
	line-height: 40px;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	z-index: 9;
	bottom: 0px;
	overflow: hidden;
}

.mui-video-Container .mui-progressWrap {
	height: 20px;
	width: 100%;
	position: absolute;
	top: 18px;
	left: 55px;
}

.mui-video-Container .mui-progressWrap .mui-wrap-right {
	position: absolute;
	width: 100%;
	padding-right: 148px;
}

.mui-video-Container .mui-full-back {
	position: absolute;
	z-index: 2;
	display: none;
}

.mui-video-Container .mui-full-back .icon {
	font-size: 26px;
	color: white;
	left: 15px;
	top: 5px;
}

.mui-video-Container .mui-full-back .vtitle {
	color: white;
	margin-left: 15px;
	position: relative;
	top: 4px;
	font-size: 15px;
}

.mui-video-Container .v_left,
.mui-video-Container .b_right {
	position: absolute;
	width: 50%;
	height: 100%;
	z-index: 1;
}

.mui-video-Container .b_right {
	right: 0px;
}

.mui-video-Container .ptime {
	position: absolute;
	z-index: 2;
	left: 0px;
	text-align: center;
	display: none;
	top: 0px;
	bottom: 0px;
	right: 0px;
	margin: auto;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.6);
	height: 40px;
	width: 120px;
	line-height: 40px;
	color: white;
}
.text_dome{
	text-indent: 2em;
}

.dianzan{
	position: relative;
	float: left;
	width: 100%;
	height: 60px;
	padding: 8px 10px;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(235,235,235,1);
}

.dianzan>div{
	position: relative;
    width: 70px;
	height: 44px;
	float: left;

}
.dianzan>div>img{
	width: 22px;
	height: 22px;
	position: relative;
	float: left;
	margin-top: 11px;
}

.dianzan>div>span{
	padding: 0 5px;
	box-sizing: border-box;
	font-size:13px;
    font-weight:500;
    color:rgba(254,97,94,1);
    line-height:44px;
}

.pinglun{
	position: relative;
	float: left;
	width: 100%;
	padding: 10px 10px;
	box-sizing: border-box;
	padding-bottom: 80px;
}
.pinglun>div:nth-child(1){
	position: relative;
	float: left;
	width: 100%;
} 
.pinglun>div:nth-child(1)>span:nth-child(1){
  position: relative;
  float:left;
  width: 40px;
  line-height: 36px;  
 font-size:13px;
font-weight:500;
color:rgba(102,102,102,1);
}
.pinglun>div:nth-child(1)>span:nth-child(2){
	  position: relative;
	  float:left;
	  width: calc(100% - 40px);
	  text-align: left;
	  line-height: 36px;  
	 font-size:13px;
	font-weight:500;
	color:rgba(102,102,102,1);
}

.danping{
	position: relative;
	float: left;
	width: 100%;
}
.danping>.danshi{
	position: relative;
	float: left;
	width: 100%;
	background: #FFFFFF;
	margin-top: 30px;
}
.danshi>div:nth-child(1){
	position: relative;
	float: left;
	width: 100%;
    height: 40px;
}
.danshi>div:nth-child(2){
	position: relative;
	float: left;
	margin-top: 15px;
	width: 100%;
	font-size:14px;
font-weight:500;
color:rgba(102,102,102,1);
line-height:22px;
text-indent: 2em;
}

.danshi>div:nth-child(1)>div:nth-child(1){
	position: relative;
	float: left;
	width: 40px;
	height: 40px;
}
.danshi>div:nth-child(1)>div:nth-child(1)>img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.danshi>div:nth-child(1)>div:nth-child(2){
	position: relative;
	float: left;
	width: calc(100% - 40px);
	height: 40px;
	padding-left: 15px;
	box-sizing: border-box;
}
.danshi>div:nth-child(1)>div:nth-child(2)>div{
position: relative;
	float: left;
	width: 100%;
	height: 20px;
	line-height: 20px;
	font-size:11px;
font-weight:500;
color:rgba(102,102,102,1);
}
.hufoot{
	position: fixed;
	width: 100%;
	height: 66px;
	padding: 13px  15px;
	background:rgba(252,252,252,1);
    box-shadow:0px 5px 7px 0px rgba(239, 239, 239, 0.35);
	bottom: 0px;
    z-index: 10;
}

.hufoot>input{
	position: relative;
	float: left;
	width:calc(100% - 95px);
	height: 40px;
	border:1px solid rgba(232,232,232,1);
border-radius:4px;
box-sizing: border-box;
font-size:14px;
font-weight:500;
color:rgba(153,153,153,1);
line-height:40px;

}
.hufoot>div{
	text-align: center;
	width: 80px;
	height: 40px;
	position: relative;
	float: right;
	line-height: 40px;
	font-size:14px;
font-weight:bold;
color:rgba(255,255,255,1);
background:linear-gradient(84deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
border-radius:4px;
}


</style>
	<body>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品详情</h1>
		</header>
		<div class="mui-content">
			<!--以上无关，只为示例-->
			<!-- 视频播放区域-->
			<div class="mui-video-Container" id="video_Container">
				<div class="mui-video-full">
					<!--加载提示-->
					<div class="rprogress">
						<span class="ladtit">加载</span>
						<div class="rschedule"></div>
					</div>
					<!--end-->
					<!--全屏时后退图标-->
					<span class="mui-full-back">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-houtui1"></use>
						</svg>
						<span class="vtitle"></span>
					</span>
					<!--end-->
					<!--播放按钮-->
					<span class="mui-pay_ico">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-bofang1"></use>
						</svg>
					</span>
					<!--end-->
					<div class="v_left"></div>
					<div class="b_right"></div>
					<div class="ptime"></div>
					<div class="mui-video-txt"></div>
					<!-- 播放进度条-->
					<div class="mui-videoControls">
						<span class="mui-time-total mui-quanping">
							<!--全屏按钮-->
							<span class="mui-time-cout">00:00</span>
							<!--总时间-->
							<span class="mui-full-btu">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-quanping"></use>
								</svg>
							</span>
						</span>
						<span class="mui-time-current">00:00</span>
						<!--进度时间-->
						<div class="mui-progressWrap">
							<!--可以拖动的进度条-->
							<div class="mui-wrap-right">
								<input type="range" id='mui-block-range' value="0" min="0" max="100">
							</div>
						</div>
					</div>
					<!-- 播放进度条end-->
				</div>
			</div>
			<!--视频播放区域end-->
			<!--以下无关，只为示例-->
			<p class="text_dome">
				为了给最疼爱的小老弟菜鸟（克里斯多夫·奈茨 Christopher Knights 配音）庆生，老大（汤姆·麦格拉思 Tom McGrath 配音）带领菜鸟以及好搭档科斯基（克里斯·米勒
			</p>

			<div class="dianzan" id="dianzan">
				<div  class="shoucang" state="0"><img src="../image/collectionfalse.png" /><span>收藏</span></div>
				<div  class="dainzan" state="0"><img src="../image/zanfalse.png" /><span>132</span></div>
			</div>
			
			<div class="pinglun">
				<div><span>评论</span><span>50</span></div>
				
				<div class="danping">
					<div  class="danshi">
						 <div>
							<div><img  src="../image/touxiangmy.png" /></div>
							<div>
								<div>JACK</div>
								<div>2019-01-17</div>
							</div>
						</div>
						<div>
							音乐让人痴迷的点，就是它的内容，它的情感，它的境界。其实，很多人听不出歌手的能力，听到喜欢的歌时，要不就是被那声音打动，或者被歌词感染，要么就是感觉这首歌，唱到了自己的心理，所以，不断的听，不断的沉溺在哪个世界之中，不能自拔。
						</div>
					</div>
					
						<div  class="danshi">
						 <div>
							<div><img  src="../image/touxiangmy.png" /></div>
							<div>
								<div>JACK</div>
								<div>2019-01-17</div>
							</div>
						</div>
						<div>
							音乐让人痴迷的点，就是它的内容，它的情感，它的境界。其实，很多人听不出歌手的能力，听到喜欢的歌时，要不就是被那声音打动，或者被歌词感染，要么就是感觉这首歌，唱到了自己的心理，所以，不断的听，不断的沉溺在哪个世界之中，不能自拔。
						</div>
					</div>
					
				</div>
				
			</div>

		</div>
		
		<div  class="hufoot"><input type="text"   placeholder="我也来说两句" /><div>发送</div></div>
		
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/html5video.js"></script>
	<script src="../js/hls.min.js"></script>
	<script src="../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
		mui.init()
		var htmlvideo = Html5video("#video_Container", {
			title: "这个是点击播放的时候视频标题", //视频标题，当全屏时会显示
			url: '../video/2017123101.mp4', //支持本地视频和网络视频，格式MP4
			img: '../image/shou10.png', //视频截图封面
			autoplay: false, //是否自动播放视频
			isMobile: false, //是否开启当处于移动网络时，提示用户是否继续播放视频。,不支持浏览器环境
			isFull: false, //是否点击播放就全屏显示
			iospay: false, //如果是IOS系统是否采用苹果系统自带播放器, 可以在浏览器或微信中，全屏观看视频
			drag: true, //禁止拖动,调节,音量和亮度
			isfull: true, //是否显示全屏按钮
			prompt: function(video) //当开启isMobile时,这里可以写提示用户的内容,h5+环境才有效
			{
				mui.confirm('你当前处于移动手机网络将会消耗手机流量，是否继续播放？', '提示', ["取消", "确定"], function(e) {
					if (e.index == 1) {
						video.play();
					}
				}, "div");
			}
		});
		
		//收藏
		mui("#dianzan").on("tap",".shoucang",function(){
			var index=$(this).attr("state")
			if(index==0){
			$(this).children("img").attr("src","../image/collectiontrue.png")	
				$(this).attr("state","1")
				
			} else{
					$(this).children("img").attr("src","../image/collectionfalse.png")	
					$(this).attr("state","0")
			}
		})
			
				//点赞
		mui("#dianzan").on("tap",".dainzan",function(){
			var index=$(this).attr("state")
			if(index==0){
			$(this).children("img").attr("src","../image/zantrue.png")	
				$(this).attr("state","1")
				
			} else{
					$(this).children("img").attr("src","../image/zanfalse.png")	
					$(this).attr("state","0")
			}
		})	
			
		
		
	</script>
</html>
